<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: white;
		
		padding:30rpx 25rpx;
	}

	.list {
		
		border-bottom: 1px solid #ccc;
		align-items: flex-start;
		padding:25rpx 0;
		.red {
			transform: translateY(6rpx);
		}

		.textarea {
			width: 550rpx;
			height: 120rpx;
			font-size: 28rpx;
		}

		.mic {
			height: 120rpx;
			width: 80rpx;
			border-left: 1px solid #ccc;
			padding-left: 20rpx;
		}

		.ipt,.picker {
			width: 550rpx;
			text-align: right;
		}

		.uploadfile {
			width: 550rpx;

			.btns {
				width: 100%;

				.btn {
					width: 152rpx;
					height: 64rpx;

					border: 2rpx solid #bfbfbf;
					border-radius: 34rpx;
				}
			}
		}

		.record {
			width: 550rpx;
		}
	}
	.line2{
		width:100%;
		border-bottom: 1px solid #ccc;
		line-height:80rpx ;
		.line{
			width:100%;
			
			.t2{
				width:55%;
			}
		}
	}
</style>

<template>
	<view class="content">
		<view class="f34 bold" style="padding:0 30rpx;border-bottom: 1px solid #ccc;padding-bottom: 20rpx;">付款</view>
		<view class="line2 ">
			<view class="line between-flex f28">
				<view class="align-flex">
					<view class="gray m-right30">
						分期
					</view>
					<view class="textColor">
						{{item.index+1}}
					</view>
				</view>
				<view class="align-flex t2 one">
					<view class="gray m-right30">
						计划付款日期
					</view>
					<view class="textColor">
						{{item.payPlanDate}}
					</view>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="align-flex">
					<view class="gray m-right30">
						本期应付
					</view>
					<view class="textColor">
						¥{{item.payablePrice | price}}
					</view>
				</view>
				<view class="align-flex t2">
					<view class="gray m-right30">
						本期待付
					</view>
					<view class="textColor">
						¥{{(item.payablePrice - item.paidPrice) | price}}
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				付款日期
			</view>
			<picker mode="date"  @change="choosedate">
				<view class="picker blue ">
					{{date}} <u-icon name="arrow-right"></u-icon>
				</view>
			</picker>
			
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				本次付款（单位：元）
			</view>
			<input style="text-align: right;" @input="ipt" v-model="payprice" type="digit" placeholder="请输入" />
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				付款单位 
			</view>
			<picker mode="selector"  @change="chooseCompany" :range="companyArr" range-key="name">
				<view class="picker blue ">
					<view class="picker blue ">
						{{company?company.name:'请选择'}} <u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</picker>
			
		</view>
		<view class="list between-flex f28">
			<view class="align-flex p-left10 gray">
				备注
			</view>
			<textarea class="textarea" v-model="remarks" placeholder="请填写备注" />
		</view>
		<view class="lbtn" @click="submit">提交</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: {}
			},
			companyId:{
				default: 0
			}
		},
		data() {
			return {
				head: this.$head,
				date:'',
				payprice:'',
				companyArr:uni.getStorageSync('company'),
				company:null,
				remarks:''

			}
		},
		created() {
			console.log(this.item)
			this.getdate()
			this.getcompany()
		},

		methods: {
			getcompany(){
				var list = uni.getStorageSync('company')
				list.forEach(item=>{
					if(item.id==this.companyId){
						this.company=item
					}
				})
			},
			ipt(e){
				var price=e.detail.value
				if(price>(this.item.payablePrice - this.item.paidPrice)){
					this.$msg('输入金额大于待付金额')
					this.payprice=''
				}
			},
			choosedate(e){
				this.date=e.detail.value
			},
			chooseCompany(e){
				this.company=this.companyArr[e.detail.value]
			},
			getdate(){
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var hour = date.getHours()
				var min = date.getMinutes()
				month < 10 ? month = '0' + month : ''
				strDate < 10 ? strDate = '0' + strDate : ''
				hour < 10 ? hour = '0' + hour : ''
				min < 10 ? min = '0' + min : ''
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
					
				this.date= currentdate;
			},
			submit() {
				if (!this.company) {
					this.$msg('请选择付款单位！')
					return
				}
				
				if (!this.payprice) {
					this.$msg('请输入本次付款金额！')
					return
				}			
				var obj = {
					contractPayPlanId:this.item.id,
					payDate:this.date,
					planNo:this.item.index+1,
					remarks:this.remarks,
					payPrice:this.payprice,
					payCompanyId:this.company.id
				}
			
				this.$showloading()
				this.$pop.ajaxPost('/contract/pay/details/create',obj).then((res)=>{
					uni.hideLoading()
					if(res.code==0){
						this.$emit('submit')
					}else{
					this.$msg(res.msg)	
					}
				})
				
			},


		}
	}
</script>
